<!--
  -    Copyright (c) 2018-2025, infomng All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: infomng
  -->
<template>
  <div class="execution">
    <basic-container>
      <avue-crud
        ref="crud"
        :page.sync="page"
        :data="tableData"
        :permission="permissionList"
        :table-loading="tableLoading"
        :option="tableOption"
        @on-load="getList"
        @search-change="searchChange"
        @refresh-change="refreshChange"
        @size-change="sizeChange"
        @current-change="currentChange"
        @row-update="handleUpdate"
        @row-save="handleSave"
        @row-del="handleDel"
      >
        <template slot="menuLeft">
          <!--       <el-button
            v-if="permissions.pfoc_realityproducelinemodeling_export"
            class="filter-item"
            plain
            type="primary"
            size="small"
            icon="el-icon-download"
            @click="exportExcel">导出
          </el-button>-->
          <el-button type="primary" icon="el-icon-plus" @click="addLine"
            >新增</el-button
          >
        </template>
        <template slot="menu" slot-scope="scope">
          <!--          <el-button type="text"  icon="el-icon-s-release"  size="small" plain  @click="lineRelease(scope.row,scope.index)">产线上线</el-button>-->
          <el-button
            type="text"
            icon="el-icon-copy-document"
            size="small"
            plain
            @click="handleCopy(scope.row, scope.index)"
            >复制</el-button
          >
          <el-button
            type="text"
            icon="el-icon-view"
            size="small"
            plain
            @click="handleView(scope.row, scope.index)"
            >查看</el-button
          >
          <el-button
            type="text"
            icon="el-icon-edit"
            size="small"
            plain
            @click="editLine(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            icon="el-icon-delete"
            size="small"
            plain
            @click="handleDel(scope.row, scope.index)"
            >删除</el-button
          >
        </template>
      </avue-crud>

      <!--新增弹窗页面-->
      <el-dialog
        v-if="addDialogVisible"
        title=""
        :visible.sync="addDialogVisible"
        width="50%"
        lock-scroll
        :close-on-click-modal="false"
        :fullscreen="addDialogFull"
      >
        <template slot="title">
          <div class="avue-crud__dialog__header">
            <span class="el-dialog__title">
              <span
                style="
                  display: inline-block;
                  background-color: #3478f5;
                  width: 3px;
                  height: 20px;
                  margin-right: 5px;
                  float: left;
                  margin-top: 2px;
                "
              ></span>
              {{id?"编辑产线":"创建产线"}}
            </span>
          </div>
        </template>
        <!--新增产线页面-->
        <addLine ref="addRealityRef" @closeAdd="closeAdd" :line-id="id" />
      </el-dialog>

      <!--修改弹窗页面-->
      <!-- <el-dialog
        v-if="editDialogVisible"
        title=""
        :visible.sync="editDialogVisible"
        width="50%"
        lock-scroll
        :fullscreen="editDialogFull"
      >
        <el-backtop
          target=".el-card__body .el-dialog__wrapper .el-dialog"
          :right="15"
          :bottom="20"
          :visibility-height="1"
        />
        <el-backtop :bottom="60"></el-backtop>
        <template slot="title">
          <div class="avue-crud__dialog__header">
            <span class="el-dialog__title">
              <span
                style="
                  display: inline-block;
                  background-color: #3478f5;
                  width: 3px;
                  height: 20px;
                  margin-right: 5px;
                  float: left;
                  margin-top: 2px;
                "
              ></span>
              产线建模-修改
            </span>
          </div>
        </template>

        <editLine ref="editModelingRef" :line-id="id" @closeEdit="closeEdit" />
      </el-dialog> -->

      <!--预览弹窗页面-->
      <el-dialog
        v-if="viewDialogVisible"
        title=""
        :visible.sync="viewDialogVisible"
        width="50%"
        lock-scroll
        :fullscreen="viewDialogFull"
      >
        <el-backtop
          target=".el-card__body .el-dialog__wrapper .el-dialog"
          :right="15"
          :bottom="20"
          :visibility-height="1"
        />
        <el-backtop :bottom="60"></el-backtop>
        <template slot="title">
          <div class="avue-crud__dialog__header">
            <span class="el-dialog__title">
              <span
                style="
                  display: inline-block;
                  background-color: #3478f5;
                  width: 3px;
                  height: 20px;
                  margin-right: 5px;
                  float: left;
                  margin-top: 2px;
                "
              ></span>
              产线建模-查看
            </span>
          </div>
        </template>
        <!--预览产线建模页面-->
        <viewLine ref="viewModelingRef" :line-id="id" />
      </el-dialog>

      <el-dialog
        :title="`是否确认复制`"
        :visible.sync="copyVisible"
        width="30%"
        center
      >
        <span>是否复制产线{{ copyContent.realityLineName }}?</span>
        <!-- <el-input
          v-model="lineName"
          placeholder="请输入产线名称"
          @change="change"
        ></el-input> -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="copyVisible = false">取 消</el-button>
          <el-button type="primary" @click="cormCopy">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 产线名称确认 -->
      <el-dialog
        :title="`产线名称确认`"
        :visible.sync="cormCopyVisible"
        width="30%"
        center
      >
        <!-- <span>是否复制产线{{ copyContent.realityLineName }}?</span> -->
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="产线名称" prop="name">
            <el-input
              v-model="ruleForm.name"
              placeholder="请输入产线名称"
              @change="change"
            ></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="cormCopyVisible = false">取 消</el-button>
          <el-button type="primary" @click="cormCopyHander('ruleForm')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </basic-container>
  </div>
</template>

<script>
import {
  addObj,
  putObj,
  lineModelingRelease,
} from "@/api/pfoc/realityproducelinemodeling";
import { tableOption } from "@/const/crud/pfoc/realityproducelineing";
import { mapGetters } from "vuex";
import { fetchList, delObj } from "@/api/pfoc/realityproductlinemain";
import { copyItem } from "@/api/workorderfailrecord";

/**引入新增产线页面*/
import addLine from "./add-line.vue";
/**引入修改产线页面*/
import editLine from "./edit-line";
/**引入预览产线页面*/
import viewLine from "./view-line";
export default {
  name: "realityproducelinemodeling",
  components: {
    //新增产线页面
    addLine,
    //修改产线页面
    editLine,
    //预览产线页面
    viewLine,
  },
  data() {
    return {
      searchForm: {},
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
      },
      tableLoading: false,
      tableOption: tableOption,
      addDialogVisible: false, //新增实际产线页面开关
      addDialogFull: true, //新增实际产线页面弹窗缩放开关（默认放大）
      editDialogVisible: false, //修改实际产线页面开关
      editDialogFull: true, //修改实际产线页面弹窗缩放开关（默认放大）
      viewDialogVisible: false, //预览实际产线页面开关
      viewDialogFull: true, //预览实际产线页面弹窗缩放开关（默认放大）
      id: null, //存储产线ID
      copyVisible: false,
      copyContent: {},
      lineName: "",
      cormCopyVisible: false,
      ruleForm: {
        name: "",
      },
      rules: {
        name: [{ required: true, message: "请输入产线名称", trigger: "blur" }],
      },
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
    permissionList() {
      return {
        addBtn: this.vaildData(
          this.permissions.pfoc_realityproducelinemodeling_add,
          false
        ),
        delBtn: this.vaildData(
          this.permissions.pfoc_realityproducelinemodeling_del,
          false
        ),
        editBtn: this.vaildData(
          this.permissions.pfoc_realityproducelinemodeling_edit,
          false
        ),
      };
    },
  },

  methods: {
    cormCopy() {
      this.cormCopyVisible = true;
      this.copyVisible = false;
    },
    cormCopyHander(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("这一行数据", this.copyContent);

          // this.copyToClipboard(JSON.stringify(this.copyContent));
          let data = {
            line: this.ruleForm.name,
            id: this.copyContent.id,
          };

          // 调接口
          copyItem(data).then((res) => {
            console.log(res);

            this.$message.success("复制成功");
            this.cormCopyVisible = false;
            this.getList(this.page);
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    change() {
      this.copyContent = {
        ...this.copyContent,
        realityLineName: this.ruleForm.name,
      };
    },
    copyToClipboard(text) {
      const textarea = document.createElement("textarea");
      textarea.value = text;
      textarea.setAttribute("readonly", "");
      textarea.style.cssText = "position:fixed; top:-9999px";
      document.body.appendChild(textarea);
      textarea.select();

      if (document.execCommand("copy")) {
        this.$message.success("复制成功");
        this.cormCopyVisible = false;
      } else {
        this.$message.error("请手动复制");
      }

      document.body.removeChild(textarea);
    },
    handleCopy(item, index) {
      this.copyContent = item;
      this.copyVisible = true;
    },
    // 列表查询
    getList(page, params) {
      this.tableLoading = true;
      fetchList(
        Object.assign(
          {
            descs: "create_time",
            current: page.currentPage,
            size: page.pageSize,
          },
          params,
          this.searchForm
        )
      )
        .then((response) => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    // 删除
    handleDel: function (row, index) {
      this.$confirm("是否确认删除产线：" + row.realityLineName, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delObj(row.id);
        })
        .then((data) => {
          this.$message.success("删除成功");
          this.getList(this.page);
        });
    },
    // 更新
    handleUpdate: function (row, index, done, loading) {
      putObj(row)
        .then((data) => {
          this.$message.success("修改成功");
          done();
          this.getList(this.page);
        })
        .catch(() => {
          loading();
        });
    },
    // 保存
    handleSave: function (row, done, loading) {
      addObj(row)
        .then((data) => {
          this.$message.success("添加成功");
          done();
          this.getList(this.page);
        })
        .catch(() => {
          loading();
        });
    },
    // 每页条数改变事件
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    // 当前页发生改变事件
    currentChange(current) {
      this.page.currentPage = current;
    },
    // 查询事件
    searchChange(form, done) {
      this.searchForm = form;
      this.page.currentPage = 1;
      this.getList(this.page, form);
      done();
    },
    // 刷新事件
    refreshChange() {
      this.getList(this.page);
    },
    //  导出excel
    exportExcel() {
      this.downBlobFile(
        "/pfoc/realityproducelinemodeling/export",
        this.searchForm,
        "realityproducelinemodeling.xlsx"
      );
    },
    //新增产线
    addLine() {
      //打开新增产线页面
      this.addDialogVisible = true;
      this.id=""
    },
    //关闭新增产线弹窗
    closeAdd() {
      //关闭新增产线页面
      this.addDialogVisible = false;
      //刷新列表
      this.refreshChange();
    },
    //修改产线
    editLine(row) {
      this.id = row.id; //产线ID用于修改时查询数据
      //打开修改产线页面
      this.addDialogVisible = true;
    },
    //关闭修改实际产线弹窗
    closeEdit() {
      //关闭新增实际产线页面
      this.editDialogVisible = false;
      //刷新列表
      this.refreshChange();
    },

    //预览
    handleView(row) {
      this.id = row.id; //实际产线ID用于预览时查询数据
      //打开预览实际产线页面
      this.viewDialogVisible = true;
      this.$nextTick(() => {
        //调用预览页面实际产线查询方法
        this.$refs.viewModelingRef.getLineModelingInfos();
      });
    },
    //产线上线
    lineRelease(row, index) {
      const h = this.$createElement; //①第一个参数为标签，即创建的节点元素的标签是什么 ②第二个参数是属性配置，如class、style等③第三个参数是节点元素的内容
      this.$confirm("提示", {
        title: "提示",
        message: h("div", [
          h("p", `产线模型：【 ${row.realityLineName}】是否确认发布？`),
        ]),
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          //调用产品发布方法
          return lineModelingRelease(row.id);
        })
        .then((response) => {
          if (response.data.data == "success") {
            this.$message.success("发布成功");
          } else {
            this.$message.warning(
              "产线模型已上线，请先在产线列表中删除后再次进行上线。"
            );
          }
          this.getList(this.page);
        });
    },
  },
};
</script>
